<template>
	<view class="start-school">
		<MyHeader :title="title"></MyHeader>
		<scroll-view scroll-y="true" >
			<view>
				<!-- 顶部填写入学信息 -->
				<view class="banner-bg">
					<view class="sign-btn" @tap="goEnterSchool">立即填写 > </view>
				</view>
				<view class="school-content">
					<!-- 按钮列表 -->
					<MangaList></MangaList>
					<!-- 名人堂 -->
					<view class="main-title">名人堂</view>
					<scroll-view scroll-y="true" class="scroll-content">
						<view class="scroll-item">
							<CelebrityList></CelebrityList>
						</view>
					</scroll-view>
					<!-- 公告 -->
					<view class="main-title">公告</view>
					<Notice></Notice>
				</view>
			</view>
		</scroll-view>
		<!-- 弹窗：快速入学 -->
		<view class="pop" v-if="isPop">
			<view class="pop-mask">
				<view class="pop-box">
					<view class="pop-content">
						<image @tap="closePop" class="close" src="../../static/item-Img/cha.png" mode=""></image>
						<view class="btn-text" @tap="goEnterSchool">快速入学</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyHeader from '../../common/my-header/my-header.vue'
	import MangaList from '../../compontent/start-school/MangaList.vue'
	import CelebrityList from '../../compontent/start-school/Celebrity.vue'
	import Notice from '../../compontent/start-school/Notice.vue'
	
	export default {
		data(){
			return {
				title: '',
				isPop: true
			}
		},
		onLoad(options){
			// 解密操作
			const item = JSON.parse(decodeURIComponent(options.item))
			this.title = item.className
		},
		methods:{
			// 关闭弹窗
			closePop(){
				this.isPop = false
			},
			// 跳转到输入信息页面
			goEnterSchool(){
				uni.navigateTo({
					url:'/pages/enter-shcool/enter-school'
				})
			}
		},
		components: {
			MyHeader,
			MangaList,
			CelebrityList,
			Notice
		}
	}
</script>

<style scoped>
	/* 隐藏滚动条 */
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
	}
	scroll-view {
		/* height: 1500rpx; */
		background: #f3f4f6;
	}
	.start-school {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background: #f3f4f6;
	}
	.banner-bg {
		position: relative;
		width: 750rpx;
		height: 300rpx;
		background: url('https://img0.baidu.com/it/u=2194686690,520990297&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') no-repeat;
		background-size: cover;
	}
	.sign-btn {
		position: absolute;
		top: 195rpx;
		left: 60rpx;
		width: 173rpx;
		height: 44rpx;
		font-size: 28rpx;
		color: #fff;
		padding: 5rpx 10rpx;
		text-align: center;
		line-height: 44rpx;
		border: 1rpx solid #fff;
		border-radius: 40rpx;
	}
	.school-content {
		padding: 40rpx 37rpx;
	}
	.scroll-content {
		width: 100%;
		height: 100%;
	}
	/* 快速入学 */
	.pop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	.pop-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: rgba(0, 0, 0, .3);
	}
	.pop-box {
		width: 500rpx;
		height: 700rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.pop-content {
		width: 500rpx;
		height: 693rpx;
		background: url('https://img0.baidu.com/it/u=3473638346,2733772401&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') no-repeat;
		background-size: cover;
	}
	.close {
		width: 63rpx;
		height: 63rpx;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
	}
	.pop-btn {
		width: 420rpx;
		height: 80rpx;
		position: absolute;
		left: 40rpx;
		bottom: 126rpx;
	}
	.btn-text {
		width: 136rpx;
		height: 33rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		position: absolute;
		left: 185rpx;
		bottom: 160rpx;
	}
	
</style>